<style lang="scss">
.announce-detail {
  // .flex-container {
  //     display: flex;

  //     .form-item-title {
  //         width: 108px;
  //         text-align: right;
  //     }
  // }
  .button-container {
    margin: 5px 0 10px 0;
    display: flex;
    flex-direction: row-reverse;
    // justify-content: space-between;

    .button {
      margin-left: 15px;
      // &:first-child {
      //     margin: 0;
      // }
      span {
        margin: 0 5px;
      }
    }
  }
  .content-container {
    padding: 0 20px;

    .title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }

    .attach-file-container {
      .attach-file-label {
        font-weight: bold;
      }
      .attach-file-list {
        .attach-file-item {
          padding: 5px 0;
          font-size: 12px;
        }
      }
    }

    .create-timer-container {
      // padding: 10px 0;
      padding-bottom: 20px;
      text-align: right;
      // font-size: 14px;
      font-weight: bold;
    }
  }
  .editor-container {
    width: 100%;
    margin: 15px auto;
    overflow-x: auto;
  }
  .border-content {
    min-height: 100px;
    padding: 10px 35px;
    border: 1px solid #d1d5da;
    border-radius: 5px;
    font-size: 14px;
  }
}
</style>
<template>
  <section class="announce-detail">
    <div class="content-container">
      <div class="button-container">

        <Button :disabled="disableNext"
                class="button"
                type="primary"
                @click="next">
          <span>下一条</span>
          <Icon type="ios-arrow-forward" />
        </Button>
        <Button :disabled="disablePrevious"
                class="button"
                @click="previous">
          <Icon type="ios-arrow-back" />
          <span>上一条</span>
        </Button>
      </div>
      <div class="title">{{formData.title}}</div>
      <div class="flex-container">
        <!-- <div class="form-item-title">公告内容：</div> -->
        <div class="editor-container"
             ref="editorContainer"
             v-html="formData.content"></div>
      </div>
      <div class="create-timer-container">{{formData.updatedAt}}</div>
      <div class="attach-file-container">
        <div class="attach-file-label">附件</div>
        <ul class="attach-file-list">
          <li class="attach-file-item"
              v-for="item in fileList"
              :key="item.key">
            <a download
               target="_blank"
               :href="item.attachUrl">{{item.attachTitle}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="text-right padding-right-10 padding-bottom-10">
      <Button v-if="!routerId"
              @click="close">关闭</Button>
    </div>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import {
  HttpTaskCenter,
  HttpAnnounce,
  HttpReadAnnounce,
  HttpAnnounceList,
} from "../../../service/notice";
export default {
  props: ["id", "page", "row", "isQuery"],
  data () {
    return {
      nowId: this.id,
      loading: false,
      formData: {},
      fileList: [],
      routerId: this.$route.query.id,
      index: 0,
      nowPage: this.page || 1,
      rows: this.row || 10,
      announceList: [],
      disableNext: true,
      disablePrevious: true,
      totalPages: 1,
      totalElements: 10,
    };
  },
  watch: {
    $route (to, from) {
      this.routerId = to.query.id;
      this.getDetail();
    },
  },
  created () {
    this.getAnnounceList(this.nowId, false);
    this.checkHas();
    this.getDetail();
  },
  computed: {
    ...mapGetters("dictionary", ["getProductList"]),
  },
  methods: {
    // 检测是否有下一条或上一条
    checkHas () {
      // 是否第一条
      if (this.index === 0 && this.nowPage === 1) {
        this.disablePrevious = true;
        this.disableNext = false;
      }
      // 是否最后一条
      else if (
        this.nowPage === this.totalPages &&
        this.index + 1 === this.totalElements % this.rows
      ) {
        (this.disableNext = true), (this.disablePrevious = false);
      } else {
        this.disablePrevious = false;
        this.disableNext = false;
      }
    },
    async getListData () {
      await HttpAnnounceList({
        page: this.nowPage,
        rows: this.rows,
        sidx: "id",
        sord: "desc",
      }).then((res) => {
        this.announceList = res.data.content;
        this.totalPages = res.data.totalPages;
        this.totalElements = res.data.totalElements;
      });
    },
    async getAnnounceList (id, isBefore) {
      await this.getListData()
      let index = 0;
      for (let item of this.announceList) {
        if (id !== null || id !== undefined) {
          if (this.nowId === item.id) {
            this.index = index;
            return
          }
        }
        index++;
      }
    },
    async previous () {
      this.index--;
      if (this.index < 0) {
        this.index = this.rows - 1;
        this.nowPage--;
        await this.getAnnounceList(null, true);
      }
      this.nowId = this.announceList[this.index].id;
      this.getDetail(true);
      this.checkHas();
    },
    async next () {
      this.index++;
      if (this.index === this.rows) {
        this.index = 0;
        this.nowPage++;
        await this.getListData();
      }
      this.nowId = this.announceList[this.index].id;
      this.getDetail(true);
      this.checkHas();
    },
    close () {
      this.$emit("on-close");
    },
    async markAsRead () {
      await HttpReadAnnounce({
        id: this.formData.id,
      }).then(
        (res) => { },
        (err) => {
          this.$Message.error(err.message);
        }
      );
    },
    async getDetail (notRead) {
      // this.loading = true;
      await HttpAnnounce({
        id: this.nowId ? this.nowId : this.routerId,
      }).then(
        (res) => {
          this.formData = res.data.entity;
          this.fileList = res.data.entity.meta
            ? JSON.parse(res.data.entity.meta).items
            : "";
          // 如果是uc列表页查看则不标记为已读
          if (this.isQuery) return;
          // 如果上一条下一条则不标记为已读
          if (notRead) return;
          this.markAsRead();
          if (
            (this.formData.errorDetail || "").indexOf("==>") != -1
          ) {
            this.formData.errorMsg = "调用对应业务逻辑时发生异常";
          }
        },
        (err) => {
          this.$Message.error(err.message);
          this.loading = false;
        }
      );
    },
  },
};
</script>
